$(document).ready(function () {
    Judgeidentity()
    statisticsCharts()
    statisticsCharts2()
    mapCharts()
    pieCharts()
    pieChart2()
    leftChart1()
    leftChart2()
    leftChart3()
})



/*图表*/

function mapCharts() {


    // var uploadedDataURL = '../../../FireCC/static/GJson/栖霞区.json';


    // var outname = ['八卦洲街道', '燕子矶街道', '迈皋桥街道', '尧化街道', '栖霞街道', '仙林街道', '马群街道', '西岗街道', '龙潭街道'];
    // //请勿修改outname
    // var outvalue = [15, 23, 45, 7, 12, 44, 24, 38, 2]; //编辑outvalue，注意与outname顺序对应
    // var outdata = [];
    // for (var i = 0; i < outname.length; i++) {
    //     outdata.push({
    //         name: outname[i],
    //         value: outvalue[i],
    //     });
    // }
    // $.getJSON(uploadedDataURL, function (geoJson) {
    //     echarts.registerMap('qixia', geoJson); // 自定义地图
    //     var geoCoordMap = {
    //         八卦洲街道: [118.82,32.17],
    //         燕子矶街道: [118.82,32.14],
    //         迈皋桥街道: [118.85,32.11],
    //         尧化街道: [118.89,32.13],
    //         栖霞街道: [118.95,32.15],
    //         仙林街道: [118.92,32.10],
    //         马群街道: [118.89,32.05],
    //         西岗街道: [119.01,32.14],
    //         龙潭街道: [119.07,32.19],
    //     };

    //     let handleData = function (data) {
    //         let list = [];
    //         for (let i = 0; i < outname.length; i++) {
    //             let geoCoord = geoCoordMap[outname[i]];
    //             if (geoCoord) {
    //                 list.push({
    //                     name: outname[i],
    //                     value: geoCoord.concat(outvalue[i]),
    //                 });
    //             }
    //         }
    //         return list;
    //     };

    //     let option = {
    //         baseOption: {
    //             timeline: {
    //                 show: false,
    //             },
    //             tooltip: {
    //                 trigger: 'item',
    //                 formatter: function (params) {
    //                     if (!params.value) {
    //                         return `${params.name}无数据`;
    //                     } else {
    //                         return `${params.name} ${params.value}`;
    //                     }
    //                 },
    //             },
    //         },
    //         options: [
    //             {
    //                 visualMap: {
    //                     min: 0, //修改显示数值范围
    //                     max: 60, //修改显示数值范围
    //                     itemWidth: 15,
    //                     itemHeight: 90,
    //                     right: '20',
    //                     bottom: '50',
    //                     text: ['高', '低'],
    //                     textStyle: {
    //                         color: '#fff',
    //                         fontSize: 13,
    //                     },
    //                     inRange: {//可根据报告需要自定义色系
    //                         // color: ['#F0F8FF', '#2F9BFF'],
    //                         // color: ['#F0F8FF', '#006edd'],
    //                         color: ['#fefef9', '#f5e9a3', '#f0c291', '#c6202f']
    //                     },
    //                     outOfRange: {
    //                         show: false,
    //                     },
    //                 },
    //                 geo: {
    //                     show: true,
    //                     map: 'qixia',
    //                     roam: false,
    //                     label: {
    //                         emphasis: {
    //                             show: false,
    //                         },
    //                     },
    //                     itemStyle: {
    //                         normal: {
    //                             show: false,
    //                         },
    //                     },
    //                 },
    //                 series: [
    //                     {
    //                         name: 'light',
    //                         type: 'scatter',
    //                         // type: 'map',
    //                         // map: 'qixia',
    //                         coordinateSystem: 'geo',
    //                         data: handleData(outdata),
    //                         symbolSize: 1,
    //                         label: {
    //                             normal: {
    //                                 formatter: '{b}',
    //                                 fontSize: 20,
    //                                 show: true,
    //                             },
    //                             emphasis: {
    //                                 show: false,
    //                             },
    //                         },
    //                         itemStyle: {
    //                             normal: {
    //                                 areaColor: '#F0F8FF',
    //                                 borderColor: '#bbbbbb',
    //                                 borderWidth: 1,
    //                                 label: {
    //                                     show: true,
    //                                     textStyle: {
    //                                         color: '#000',
    //                                         fontSize: 12,
    //                                     },
    //                                 },
    //                             },
    //                             emphasis: {
    //                                 areaColor: '#FFAE00',
    //                             },
    //                         },
    //                     },
    //                     {
    //                         // center: 'center',
    //                         data: outdata,
    //                         // mapType: 'qixia',
    //                         map: 'qixia',
    //                         roam: false,
    //                         type: 'map',
    //                         itemStyle: {
    //                             normal: {
    //                                 label: {
    //                                     show: false,
    //                                 },
    //                             },
    //                             emphasis: {
    //                                 show: false,
    //                                 label: {
    //                                     show: false,
    //                                     textStyle: {
    //                                         color: 'transparent',
    //                                     },
    //                                 },
    //                             },
    //                         },
    //                     },
    //                 ],
    //             },
    //         ],
    //     };
    //     var charts1 = echarts.init(document.getElementById('content-mid-top-map'));

    //     charts1.setOption(option);
    // });


    // myChart.showLoading();
    var geoCoordMap = {
        八卦洲街道: [118.82, 32.17],
        燕子矶街道: [118.82, 32.14],
        迈皋桥街道: [118.85, 32.11],
        尧化街道: [118.89, 32.13],
        栖霞街道: [118.95, 32.15],
        仙林街道: [118.92, 32.10],
        马群街道: [118.89, 32.05],
        西岗街道: [119.01, 32.14],
        龙潭街道: [119.07, 32.19],
    };
    var data = [
        { name: "八卦洲街道", value: 390 },
        { name: "燕子矶街道", value: 158 },
        { name: "迈皋桥街道", value: 52 },
        { name: "迈皋桥街道", value: 52 },

        { name: "尧化街道", value: 160 },
        { name: "栖霞街道", value: 180 },
        { name: "仙林街道", value: 180 },
        { name: "仙林街道", value: 180 },
        { name: "仙林街道", value: 180 },
        { name: "仙林街道", value: 180 },
        { name: "马群街道", value: 5180 },
        { name: "西岗街道", value: 999 },
        { name: "龙潭街道", value: 152 },

    ];
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push(geoCoord.concat(data[i].value));
            }
        }
        return res;
    };

    $.get('../../../FireCC/static/GJson/栖霞区.json', function (geoJson) {

        echarts.registerMap('hebei', geoJson);
        option = {
            visualMap: {
                right: '20',
                bottom: '50',
                splitNumber: 5,
                inRange: {
                    color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                },
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                show: true,
                map: 'hebei',
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },

                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#08aeff',
                        borderColor: '#fff',
                    },
                    emphasis: {
                        areaColor: '#2286c0'
                    }
                }
            },
            series: [{
                name: '火警',
                type: 'heatmap',
                coordinateSystem: 'geo',
                data: convertData(data),
            },
            ]
        };
        var charts1 = echarts.init(document.getElementById('content-mid-top-map'));

        charts1.setOption(option);
    });






    // var geoJson = {}
    // $.ajax({
    //     url: '../../../FireCC/static/GJson/栖霞区.json',
    //     async: false,
    //     dataType: 'json',
    //     success: function (data) {
    //         echarts.registerMap('qx', data);
    //     }
    // })

    // var data = [
    //     { name: "八卦洲街道", value: 15 },
    //     { name: "燕子矶街道", value: 23 },
    //     { name: "迈皋桥街道", value: 45 },
    //     { name: "尧化街道", value: 7 },
    //     { name: "栖霞街道", value: 12 },
    //     { name: "仙林街道", value: 44 },
    //     { name: "马群街道", value: 24 },
    //     { name: "西岗街道", value: 38 },
    //     { name: "龙潭街道", value: 2 },
    // ];
    // var charts1 = echarts.init(document.getElementById('content-mid-top-map'));
    // var option1 = {
    //     tooltip: {
    //         trigger: 'item'
    //     },
    //     legend: {
    //         orient: 'vertical',
    //         left: 'left',
    //         data: ['s']
    //     },
    //     series: [{
    //         name: '火警次数',
    //         type: 'map',
    //         mapType: 'qx',
    //         symbolSize: 50,
    //         roam: true,
    //         top: '5%',
    //         left: '2%',
    //         right: '2%',
    //         label: {
    //             normal: {
    //                 show: false
    //             },
    //             emphasis: {
    //                 show: true,
    //                 color: "#fff"

    //             }
    //         },
    //         "itemStyle": {
    //             "normal": {
    //                 "borderColor": "#016cde",
    //                 "areaColor": "#2380f1",
    //                 "borderWidth": 2,
    //                 "shadowBlur": 30,
    //                 "shadowColor": "rgba(63, 218, 255, 0.5)"
    //             },
    //             "emphasis": {
    //                 "areaColor": "#31d2ff"
    //             }
    //         },
    //         "label": {
    //             "normal": {
    //                 position: 'top',
    //                 "show": true,
    //                 "formatter": function (params) {
    //                     return params.name.substr(0, (params.name.length - 2)); + "\n火灾次数:" + params.value
    //                 },
    //                 "textStyle": {
    //                     "color": "#fff"
    //                 }
    //             },
    //             "emphasis": {
    //                 "show": true,
    //                 "textStyle": {
    //                     "color": "#097593",
    //                     "fontWeight": "bolder"
    //                 }
    //             }
    //         },
    //         data: data
    //     }]
    // };
    // charts1.setOption(option1);




}

function statisticsCharts() {
    let bgColor = '#fff', fontColor = '#fff';
    let chartData = [
        { name: '1点', value: 3 },
        { name: '3点', value: 4 },
        { name: '5点', value: 4 },
        { name: '7点', value: 7 },
        { name: '9点', value: 6 },
        { name: '11点', value: 2 },
        { name: '13点', value: 3 },
        { name: '15点', value: 4 },
        { name: '17点', value: 2 },
        { name: '19点', value: 6 },
        { name: '21点', value: 6 },
        { name: '23点', value: 4 }
    ]

    let xData = chartData.map(v => v.name);
    let sData = chartData.map(v => v.value);
    let lineOption = {
        lineStyle: {
            color: '#3b538c',
        }
    }

    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '5%',
            right: '3%',
            left: '10%',
            bottom: '15%'
        },
        xAxis: [{
            type: 'category',
            data: xData,
            axisLine: lineOption,
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 10,
                color: fontColor,
            },
        }],
        yAxis: [{
            axisLabel: {
                formatter: '{value}',
                color: fontColor,
            },
            axisTick: {
                show: false
            },
            axisLine: lineOption,
            splitLine: lineOption,
        }, {
            axisLine: lineOption,
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            }
        }],
        series: [{
            type: 'bar',
            data: sData,
            barWidth: '20px',
            label: {
                show: true,
                position: "top",
                color: 'white'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#f9a74f' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#d7310a' // 100% 处的颜色
                    }], false)
                }
            }
        }]
    };
    var charts1 = echarts.init(document.getElementById('content-left-top-chart'));
    charts1.setOption(option);
}
function statisticsCharts2() {
    let bgColor = '#fff', fontColor = '#fff';
    let chartData = [
        { name: '1月', value: 25 },
        { name: '2月', value: 4 },
        { name: '3月', value: 4 },
        { name: '4月', value: 18 },
        { name: '5月', value: 6 },
        { name: '6月', value: 2 },
        { name: '7月', value: 33 },
        { name: '8月', value: 27 },
        { name: '9月', value: 18 },
        { name: '10月', value: 22 },
        { name: '11月', value: 6 },
        { name: '12月', value: 4 }
    ]

    let xData = chartData.map(v => v.name);
    let sData = chartData.map(v => v.value);
    let lineOption = {
        lineStyle: {
            color: '#3b538c',
        }
    }

    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '5%',
            right: '5%',
            left: '7%',
            bottom: '15%'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: xData,
            axisLine: lineOption,
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 10,
                color: fontColor,
            },
        }],
        yAxis: [{
            axisLabel: {
                formatter: '{value}',
                color: fontColor,
            },
            axisTick: {
                show: false
            },
            axisLine: lineOption,
            splitLine: lineOption,
        }, {
            axisLine: lineOption,
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            }
        }],
        series: [{
            type: 'line',
            data: sData,
            barWidth: '20px',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#2381f1' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#31d2ff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            label: {
                show: true,
                position: "top",
                color: 'white'
            },
            itemStyle: {
                color: '#31d2ff'
            }
        }]
    };
    var charts1 = echarts.init(document.getElementById('content-mid-bottom-map'));
    charts1.setOption(option);
}

function pieCharts(params) {

    let datas = [
        { value: 335, name: '住宅区域', percent: '10' },
        { value: 310, name: '商业区域', percent: '40' },
        { value: 274, name: '公共场所', percent: '30' },
        { value: 235, name: '其他', percent: '20' }
    ]

    let colors = ['#6e7ce0', '#5fede1', '#388df6', '#7fdefe']
    let legendData = []
    for (var j = 0; j < datas.length; j++) {
        var data = {
            name: datas[j].name,
            icon: 'circle',
            textStyle: {
                fontSize: 10,
                color: colors[j]
            }
        }
        legendData.push(data)
    }
    let objData = array2obj(datas, 'name')
    let option = {
        legend: {
            orient: 'vertical',
            top: 'center',
            left: '68%',
            data: legendData,
            formatter: function (name) {
                return `{title|${name}}{value|${objData[name].value}}{unit|起}`
            },
            textStyle: {
                rich: {
                    value: {
                        color: '#82baff',
                        fontSize: 12,
                        fontWeight: 600,
                        fontFamily: 'HuaKang',
                        padding: [0, 5, 0, 5]
                    },
                    unit: {
                        color: '#82baff',
                        fontSize: 14,
                        fontWeight: 600,
                        fontFamily: 'HuaKang',
                        padding: [0, 5, 0, 0]
                    },
                    percent: {
                        color: '#82baff',
                        fontSize: 24,
                        fontWeight: 600,
                        fontFamily: 'HuaKang',
                        padding: [0, 10, 0, 0]
                    }
                }
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: colors,
        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '70%',
                center: ['30%', '50%'],
                label: {
                    fontSize: 14
                },
                labelLine: {
                    length: 4,
                    length2: 5
                },
                data: datas,
                roseType: 'radius',
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200
                }
            }
        ]
    }
    /**
     * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
     * @description 详细描述
     * @param {参数类型} array 传入的数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
     * @param {参数类型} key  属性名 a
     * @return {返回类型说明}
     * @exception [违例类型] [违例类型说明]
     */
    function array2obj(array, key) {
        var resObj = {}
        for (var i = 0; i < array.length; i++) {
            resObj[array[i][key]] = array[i]
        }
        return resObj
    }
    var charts1 = echarts.init(document.getElementById('content-left-mid-chart'));
    charts1.setOption(option);

}

function pieChart2(params) {

    let datas = [
        { value: 335, name: '电气', percent: '42' },
        { value: 274, name: '吸烟', percent: '56' },
        { value: 274, name: '自燃', percent: '3' },
        { value: 274, name: '雷击', percent: '1' },
        { value: 274, name: '放火', percent: '9' },
        { value: 274, name: '生产', percent: '32' },
        { value: 235, name: '其他', percent: '55' }
    ]

    let colors = ['#368BFF', '#037d4a', '#f7cd4f', '#01FEE3', '#0e8ab0', '#ff0', '#65379d']
    let legendData = []
    for (var j = 0; j < datas.length; j++) {
        var data = {
            name: datas[j].name,
            icon: 'circle',
            textStyle: {
                fontSize: 10,
                color: colors[j]
            }
        }
        legendData.push(data)
    }
    let objData = array2obj(datas, 'name')
    let option = {
        legend: {
            orient: 'vertical',
            top: 'center',
            left: '68%',
            data: legendData,
            formatter: function (name) {
                return `{title|${name}}{value|${objData[name].value}}{unit|起}`
            },
            textStyle: {
                rich: {
                    value: {
                        color: '#82baff',
                        fontSize: 12,
                        fontWeight: 600,
                        fontFamily: 'HuaKang',
                        padding: [0, 5, 0, 5]
                    },
                    unit: {
                        color: '#82baff',
                        fontSize: 14,
                        fontWeight: 600,
                        fontFamily: 'HuaKang',
                        padding: [0, 5, 0, 0]
                    },
                    percent: {
                        color: '#82baff',
                        fontSize: 24,
                        fontWeight: 600,
                        fontFamily: 'HuaKang',
                        padding: [0, 10, 0, 0]
                    }
                }
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: colors,
        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '70%',
                center: ['30%', '50%'],
                label: {
                    fontSize: 14
                },
                labelLine: {
                    length: 4,
                    length2: 5
                },
                data: datas,
                roseType: 'radius',
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200
                }
            }
        ]
    }
    /**
     * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
     * @description 详细描述
     * @param {参数类型} array 传入的数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
     * @param {参数类型} key  属性名 a
     * @return {返回类型说明}
     * @exception [违例类型] [违例类型说明]
     */
    function array2obj(array, key) {
        var resObj = {}
        for (var i = 0; i < array.length; i++) {
            resObj[array[i][key]] = array[i]
        }
        return resObj
    }
    var charts1 = echarts.init(document.getElementById('content-left-bottom-chart'));
    charts1.setOption(option);

}

function leftChart1(params) {

    var category = [
        {
            name: "特大火灾",
            value: 3
        }, {
            name: "重大火灾",
            value: 7
        }, {
            name: "较大火灾",
            value: 12
        },
        {
            name: "轻型火灾",
            value: 55
        }
    ]; // 类别
    var total = 60; // 数据总数
    var datas = [];
    var categ = [];
    category.forEach(value => {
        datas.push(value.value);
        categ.push(value.name);
    });
    option = {
        xAxis: {
            max: total,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        grid: {
            left: '20%',
            top: '10%', // 设置条形图的边距
            right: 80,
            bottom: '5%'
        },
        yAxis: [{
            type: "category",
            inverse: false,
            data: categ,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            }
        }],
        series: [{
            // 内
            type: "bar",
            barWidth: 18,

            legendHoverLink: false,
            silent: true,
            itemStyle: {
                normal: {
                    color: function (params) {
                        var color;
                        if (params.dataIndex == 19) {
                            color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: "#EB5118" // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#F21F02" // 100% 处的颜色
                                }
                                ]
                            }
                        } else if (params.dataIndex == 18) {
                            color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: "#FFA048" // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#B25E14" // 100% 处的颜色
                                }
                                ]
                            }
                        } else if (params.dataIndex == 17) {
                            color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: "#F8E972" // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#E5C206" // 100% 处的颜色
                                }
                                ]
                            }
                        } else {
                            color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: "#1588D1" // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#0F4071" // 100% 处的颜色
                                }
                                ]
                            }
                        }
                        return color;
                    },
                }
            },
            label: {
                normal: {
                    show: true,
                    position: "left",
                    formatter: "{b}",
                    textStyle: {
                        color: "#fff",
                        fontSize: 14
                    }
                }
            },
            data: category,
            z: 1,
            animationEasing: "elasticOut"
        },
        {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
                normal: {
                    color: "#061348"
                }
            },
            symbolRepeat: "fixed",
            symbolMargin: 6,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [1, 21],
            symbolPosition: "start",
            symbolOffset: [1, -1],
            symbolBoundingData: this.total,
            data: category,
            z: 2,
            animationEasing: "elasticOut"
        },
        {
            // 外边框
            type: "pictorialBar",
            symbol: "rect",
            symbolBoundingData: total,
            itemStyle: {
                normal: {
                    color: "none"
                }
            },
            label: {
                normal: {
                    formatter: (params) => {
                        var text;
                        if (params.dataIndex == 1) {
                            text = '{a|  ' + (params.data / 77 * 100).toFixed(1) + '%}{f|  ' + params.data + '}';
                        } else if (params.dataIndex == 2) {
                            text = '{b|  ' + (params.data / 77 * 100).toFixed(1) + '%}{f|  ' + params.data + '}';
                        } else if (params.dataIndex == 3) {
                            text = '{c|  ' + (params.data / 77 * 100).toFixed(1) + '%}{f|  ' + params.data + '}';
                        } else {
                            text = '{d|  ' + (params.data / 77 * 100).toFixed(1) + '%}{f|  ' + params.data + '}';
                        }
                        return text;
                    },
                    rich: {
                        a: {
                            color: 'red'
                        },
                        b: {
                            color: 'blue'
                        },
                        c: {
                            color: 'yellow'
                        },
                        d: {
                            color: "green"
                        },
                        f: {
                            color: "#ffffff"
                        }
                    },
                    position: 'right',
                    distance: 0, // 向右偏移位置
                    show: true
                }
            },
            data: datas,
            z: 0,
            animationEasing: "elasticOut"
        },
        {
            name: "外框",
            type: "bar",
            barGap: "-120%", // 设置外框粗细
            data: [total, total, total, total],
            barWidth: 25,
            itemStyle: {
                normal: {
                    color: "transparent", // 填充色
                    barBorderColor: "#1C4B8E", // 边框色
                    barBorderWidth: 1, // 边框宽度
                    // barBorderRadius: 0, //圆角半径
                    label: {
                        // 标签显示位置
                        show: false,
                        position: "top" // insideTop 或者横向的 insideLeft
                    }
                }
            },
            z: 0
        }
        ]
    };
    var charts1 = echarts.init(document.getElementById('content-right-bottom-chart'));
    charts1.setOption(option);
}

function leftChart2(params) {
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '20%',
            right: '8%',
            left: '12%',
            bottom: '18%'
        },
        xAxis: [{
            type: 'category',
            name: '单位：万元',
            nameLocation: 'center',
            nameTextStyle: {
                color: '#fff',
                padding: [5, 0, 0, 0]
            },
            data: ['0~1', '1~5', '5~20', '20~50', '50~100', '~100'],
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            },
            axisLabel: {
                interval: 0,    //强制文字产生间隔
                textStyle: {    //文字样式
                    color: "e2e9ff",
                    fontSize: 10,
                }
            }
        }],
        yAxis: [{
            max: 180,
            name: '单位：次',
            axisLabel: {
                formatter: '{value}',
                color: '#e2e9ff',
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255,255,255,1)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            }
        }],
        series: [{
            type: 'bar',
            data: [66, 123, 154, 87, 32, 7],
            barWidth: '14px',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [30, 30, 30, 30],
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                }
            },
            label: {
                normal: {
                    show: true,
                    lineHeight: 20,
                    width: 60,
                    height: 20,
                    backgroundColor: 'rgba(0,160,221,0.1)',
                    borderRadius: 200,
                    position: ['-20', '-40'],
                    distance: 1,
                    formatter: [
                        '    {d|●}{a|{c}}'
                    ].join(','),
                    rich: {
                        d: {
                            color: '#3CDDCF',
                        },
                        a: {
                            color: '#fff',
                            align: 'center',
                        },
                        b: {
                            width: 1,
                            height: 30,
                            borderWidth: 1,
                            borderColor: '#234e6c',
                            align: 'left'
                        },
                    }
                }
            }
        }]
    };
    var charts1 = echarts.init(document.getElementById('content-right-mid-chart'));
    charts1.setOption(option);
}

function leftChart3(params) {

    let option = {
        grid: {
            left: '12%',
            top: '8%',
            bottom: '20%',
            right: '8%'
        },
        xAxis: {
            data: ['0~500', '501~5000', '5001~20000', '20000~50000', '50001~100000', '~100000'],
            axisTick: {
                show: false
            },
            name: '单位：元',
            nameTextStyle: {
                color: '#fff',
                padding: [0, 0, 0, -36]
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 129, 109, 0.1)',
                    width: 1 //这里是为了突出显示加上的
                }
            },
            axisLabel: {
                interval: 0,    //强制文字产生间隔
                rotate: 15,     //文字逆时针旋转45°
                textStyle: {    //文字样式
                    color: "e2e9ff",
                    fontSize: 10,
                }
            }
        },
        yAxis: [{
            splitNumber: 2,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 129, 109, 0.1)',
                    width: 1 //这里是为了突出显示加上的
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
            splitArea: {
                areaStyle: {
                    color: 'rgba(255,255,255,.5)'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 129, 109, 0.1)',
                    width: 0.5,
                    type: 'dashed'
                }
            }
        }
        ],
        series: [{
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '0%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff',
                fontWeight: 'bolder',
                fontSize: 16,
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(232, 94, 106, 1)' //  0%  处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(232, 94, 106, .5)' //  100%  处的颜色
                        }
                        ],
                        global: false //  缺省为  false
                    }
                },
                emphasis: {
                    opacity: 1
                }
            },
            data: [60, 125, 154, 220, 67, 9],
            z: 10
        }]
    };
    var charts1 = echarts.init(document.getElementById('content-right-top-chart'));
    charts1.setOption(option);
}